<template>
  <view class="search-film-list">
    <zm-empty :show="list.length == 0" text="没有找到相关影片"></zm-empty>
    <view class="flex flex-col radius-16 overflow-hidden bg-white">
      <view v-for="(item, index) in filterList" :key="index" class="flex flex-col">
        <film-card-horizontal :data="item" :keyword="keyword"></film-card-horizontal>
        <view v-if="index < filterList.length - 1" class="line"></view>
      </view>
      <view v-if="!expand && list.length > 4" class="expand-btn flex justify-center py-20">
        <zm-icon-text name="arrow" color="#999999" :text="`查看全部${list.length}部影片`" text-color="#999999" text-left @click="expand = true"></zm-icon-text>
      </view>
    </view>
    <!-- 电影预告播放组件 -->
    <film-trailer-popup></film-trailer-popup>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  name: "search-film-list",
  mixins: [hook, weixin],
  props: {
    list: { type: Array, default: () => [] },
    keyword: { type: String, default: "" }
  },
  data() {
    return {
      expand: false
    }
  },
  computed: {
    filterList() {
      return this.expand ? this.list : this.list.slice(0, 4)
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.search-film-list {
  display: flex;
  margin: 20rpx 24rpx;
  flex-direction: column;
  .line {
    height: 1rpx;
    margin: 0 auto;
    width: calc(100% - 48rpx);
    background-color: #eeeeee;
  }
  .expand-btn {
    border-top: 1rpx solid #eeeeee;
  }
}
</style>
